<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/header.css" />
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav title">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
		    <a id="link_sublimt_seach" class="mui-icon mui-icon-right-nav mui-pull-right" style="color: white;font-size: 14px;line-height: 25px;">搜索</a>
		    <h1 class="mui-title title-color">搜索用户</h1>
		</header>
		<div class="mui-content" id="div_my_face">
		    <div class="mui-input-row">
		        <input type="text" id="txt_username" class="mui-input-speech mui-input-clear" placeholder="搜索用户">
		    </div>
		    
		</div>
		
		<ul class="mui-table-view" id="div_friend" style="display: none;">
		    <li class="mui-table-view-cell mui-media">
		            <img class="mui-media-object mui-pull-left" src="../../css/registLogin/arrow.jpg" id="img_friend_pic">
		            <div class="mui-media-body">
						<p id="p_friend_name"></p>
						<p >缘信号:<span id="p_friend_username"></span></p>
						<button class="mui-pull-right" style="background-color: burlywood;" id="button_add_friend">添加好友</button>
		            </div>
		        
		    </li>
		</ul>
		
		
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/app.js" ></script>
		<script type="text/javascript">
			mui.init();
			
			mui.plusReady(function() {
				var user = app.getUserGlobalInfo();
				var link_sublimt_seach = document.getElementById("link_sublimt_seach");
				var txt_username = document.getElementById("txt_username");
				link_sublimt_seach.addEventListener("tap", function(){
					friendName = txt_username.value;
					if(friendName.length < 1 || !user.id) {
						return false;
					}
					mui.ajax(app.serverUrl + "/u/searchUser?myUserId=" +
							user.id + "&friendUsername=" + friendName,{
							data:{},
							dataType:'json',//服务器返回json格式数据
							type:'post',//HTTP请求类型
							timeout:10000,//超时时间设置为10秒；
							headers:{'Content-Type':'application/json'},	              
							success:function(data){
								//服务器返回响应，根据响应结果，分析是否登录成功；
								plus.nativeUI.closeWaiting();
								if(data.status == 200) {
									console.log(JSON.stringify(data.data));
									var img_friend_pic = document.getElementById("img_friend_pic");
									if(data.data.faceImage != null) {
										img_friend_pic.src = app.fileUrl + data.data.faceImage;
									}
									var p_friend_name = document.getElementById("p_friend_name");
									p_friend_name.innerHTML = data.data.nickname;
									var p_friend_username = document.getElementById("p_friend_username");
									p_friend_username.innerHTML = data.data.username;
									var div_friend = document.getElementById("div_friend");
									div_friend.style.display = "block";
								} else {
									app.showTip(data.msg,"error");
									return false;
								}
							}
						});
				});
				
				//添加好友
				var button_add_firend = document.getElementById("button_add_friend");
				button_add_firend.addEventListener("tap", function() {
					var p_friend_username = document.getElementById("p_friend_username");
					friendName = p_friend_username.innerHTML;
					console.log(user.id);
					console.log(friendName);
					plus.nativeUI.showWaiting("请稍后");
					mui.ajax(app.serverUrl + "/u/addFriendRequest?myUserId=" +
							user.id + "&friendUsername=" + friendName, {
						data:{},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						headers:{'Content-Type':'application/json'},
						success:function(data) {
							plus.nativeUI.closeWaiting();
							if (data.status == 200) {
								app.showTip('好友请求已发送', 'success');
								mui.openWindow("../../index.html", "index.html");
							} else {
								app.showTip('添加失败', 'error');
							}
						}
					})
				})
				});
		</script>
	</body>

</html>